<template>
  <div class="shop_info">
    <!-- 法人信息 -->
    <van-form @submit="onSubmit" error-message-align="right" input-align="right">
      <van-field v-model="name" name="name" label="法人姓名" placeholder="请输入法人姓名"
         />
         <!-- :rules="[{ required: true, message: '请输入法人姓名' }]"  :rules="[{ required: true, message: '请输入法人身份证号' }]"  -->
      <van-field v-model="identity_card_no" name="identity_card_no" label="法人身份证号" placeholder="请输入法人身份证号"
       />

      <!-- :rules="[{ required: true, message: '请输入社会信用代码' }]" :rules="[{ required: true, message: '不能为空' }]"-->
      <van-field name="front_url" label="" label-width="4rem" >
        <template #label>
          <div class="shop_upload_text">
            <div>上传身份证头像面</div>
            <div>保证照片清晰可见</div>
            <div @click="getExample('id_card_front')">查看示例</div>
          </div>
        </template>
        <template #input>
          <van-uploader v-model="front_url" :max-count="1" :after-read="afterReadFront"
            :before-delete="uploadDleteFront">
            <img src="../../../../images/mine/icon_tup.png" alt="" class="shop_upload_img" />
          </van-uploader>
        </template>
      </van-field>
      <!-- :rules="[{ required: true, message: '请输入社会信用代码' }]" :rules="[{ required: true, message: '不能为空' }]"-->
      <van-field name="back_url" label="" label-width="4rem" >
        <template #label>
          <div class="shop_upload_text">
            <div>上传身份证国徽面</div>
            <div>保证照片清晰可见</div>
            <div @click="getExample('id_card_back')">查看示例</div>
          </div>
        </template>
        <template #input>
          <van-uploader v-model="back_url" :max-count="1" :after-read="afterReadBack" :before-delete="uploadDleteBack">
            <img src="../../../../images/mine/icon_tup.png" alt="" class="shop_upload_img" />
          </van-uploader>
        </template>
      </van-field>
      <div style="width: 100%;margin-top:1rem">
        <!-- <van-button round block type="default" @click="backBtn"style="width: 95%;margin: 0.32rem auto;"
        >上一步</van-button> position: fixed;bottom: 0;-->
        <van-button round block type="info" native-type="submit" style="width: 95%;margin: 0.32rem auto;border-radius: 0.44rem"
          color="linear-gradient( 136deg, #6EC069 0%, #42A633 100%)">下一步</van-button>
      </div>
    </van-form>
    <van-button round block type="info" @click="onDraft" style="width: 95%;margin: 0.32rem auto;border-radius: 0.44rem" v-if="info.id <= 0"
      color="linear-gradient( 136deg, #6EC069 0%, #42A633 100%)">暂存草稿</van-button>
    <van-popup v-model="showExaplePopup" :style="{ width: '80%' }">
      <div class="popup_example">
        <img :src="example.content" alt="">
        <div>{{ example.tip_msg }}</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getOssParams, uploadImage, uploadDelete, getExampleList, } from "@/api/upload";
import { OCR_RECOGNIZE, CACHE_COMMIT, CACHE_INFO } from "@/api/mine";
import { setImageUrl, getImageUrl } from '@/api/upload'; // Adjust the path accordingly
export default {
  props: ["info"],
  data() {
    return {
      name: "",
      identity_card_no: "",
      front_url: [],
      back_url: [],
      legal_person: {},
      example: {},
      showExaplePopup: false
    };
  },
  mounted() {
    setTimeout(() => {
      if (this.info.id <= 0) {
        let params = {
          type: 'shop',
          key: 'legalPerson',

        }
        this.$http.get(CACHE_INFO, { params: params }).then(res => {
          if (res.data.content != '') {
            const data = JSON.parse(res.data.content);
            console.log(data,777);
            
            // 回显数据
            this.identity_card_no = data.legal_person.identity_card_no
            this.name = data.legal_person.name
            this.front_url = setImageUrl(data.legal_person.front_url)
            this.back_url = setImageUrl(data.legal_person.back_url)
          }
        })
      } else {
        this.legal_person = this.info.legal_person
        this.identity_card_no = this.info.legal_person.identity_card_no
        this.name = this.info.legal_person.name
        this.front_url = this.info.legal_person.front_url == '' ? [] : [{ url: this.info.legal_person.front_url }]
        this.back_url = this.info.legal_person.back_url == '' ? [] : [{ url: this.info.legal_person.back_url }]
      }
    }, 100)

  },
  methods: {
    async getExample(key) {
      this.example = await getExampleList(this.$http, key)
      this.showExaplePopup = true
    },
    // 上传身份证正面
    async afterReadFront(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.front_url);
        let params = {
          type: "identity_card",
          image_url: this.front_url.map((item) => item.url)[0],
          face: true,
        };
        this.$http.post(OCR_RECOGNIZE, params).then((res) => {
          // console.log(res);
          let data=res.data.identity_card
          this.legal_person = {
            name:data.name,
            address:data.address,
            birth_date:data.birth_date,
            ethnicity:data.ethnicity,
            gender:data.gender,
            identity_card_no:data.identity_card_no,
            name:data.name
          };
          this.name = res.data.identity_card.name;
          this.identity_card_no = res.data.identity_card.identity_card_no;

        });
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除身份证正面
    uploadDleteFront(file) {
      this.front_url = uploadDelete(file, this.front_url);
      this.legal_person = {};
    },
    // 上传身份证反面
    async afterReadBack(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.back_url);
        let params = {
          type: "identity_card",
          image_url: this.back_url.map((item) => item.url)[0],
          face: false,
        };
        this.$http.post(OCR_RECOGNIZE, params).then((res) => {
          this.legal_person.duration_type =
            res.data.identity_card.duration_type;

          this.legal_person.expiry_date = res.data.identity_card.expiry_date;

          this.legal_person.issue_authority =
            res.data.identity_card.issue_authority;

          this.legal_person.issue_date = res.data.identity_card.issue_date;
          this.legal_person.issue_date=res.data.identity_card.issue_authority
        });
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除身份证反面
    uploadDleteBack(file) {
      this.back_url = uploadDelete(file, this.back_url);
      // this.identity_card={}
    },
    onSubmit(values) {
      // console.log("submit", values);
      // return
      let params = {
        legal_person: {
          ...this.legal_person,
          front_url: getImageUrl(this.front_url),
          back_url: getImageUrl(this.back_url),
          name: this.name,
          identity_card_no: this.identity_card_no,
        },
      }
      console.log(params);
      
      let data = {
        type: 'shop',
        key: 'legalPerson',
        content: JSON.stringify(params)
      }
      if(this.info.id<=0){
      this.$http.post(CACHE_COMMIT, data).then(res => {
        // this.$toast('暂存成功')
      })
    }
      this.$emit("legalPerson", params);
    },
    backBtn() {
      this.$emit("goBack", 1)
    },
    onDraft() {
      let params = {
        legal_person: {
          ...this.legal_person,
          front_url: getImageUrl(this.front_url),
          back_url: getImageUrl(this.back_url),
          name: this.name,
          identity_card_no: this.identity_card_no,
        },
      }
      let data = {
        type: 'shop',
        key: 'legalPerson',
        content: JSON.stringify(params)
      }
      this.$http.post(CACHE_COMMIT, data).then(res => {
        this.$toast('暂存成功')
      })
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .van-cell {
  background: transparent;
}

.shop_upload_text {
  // line-height: 0.5rem;
  line-height: 0.6rem;
  text-align: left;
  font-style: normal;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;

  div:nth-child(1) {
    // font-weight: 400;
    font-size: 0.28rem;
    color: #333333;
  }

  div:nth-child(2) {
    font-size: 0.24rem;
    color: #999999;
  }

  div:nth-child(3) {
    font-size: 0.24rem;
    color: #31A653;
  }
}

.shop_upload_img {
  width: 0.64rem;
  height: 0.64rem;
  margin-top: 70%;
}

.popup_example {
  padding-bottom: 0.2rem;

  img {
    width: 100%;
  }

  div {
    padding: 0 .12rem;
    box-sizing: border-box;
    font-size: 0.28rem;
  }

}
</style>
